'use client';
import {useEffect, useState} from 'react';
import {marked} from "marked";

const Interview = () => {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    const [socket, setSocket] = useState(null);

    useEffect(() => {
        const ws = new WebSocket('ws://localhost:8000/ws/interview');
        // @ts-ignore
        setSocket(ws);

        ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            // @ts-ignore
            setMessages((prevMessages) =>
                [...prevMessages, {type: 'response', text: data.response}]);
        };

        ws.onclose = () => {
            console.log('WebSocket connection closed');
        };

        return () => {
            ws.close();
        };
    }, []);

    const sendMessage = () => {
        if (socket && input.trim()) {
            // @ts-ignore
            socket.send(input);
            // @ts-ignore
            setMessages((prevMessages) => [...prevMessages, {type: 'user', text: input}]);
            setInput('');
        }
    };

    return (
        <div className={'flex flex-col gap-4 items-center'}>
            <h1 className={'text-4xl font-bold'}>模拟面试</h1>
            <div
                className={'rounded-lg w-full'}
                style={{border: '1px solid black', padding: '10px', height: '450px', overflowY: 'scroll'}}>
                {messages.map((message, index) => (
                    <div className={'flex flex-col items-center'}>
                        {/*@ts-ignore*/}
                        <div
                            key={index}
                            className={
                                `${message.type === 'user' ? `text-right` : 'text-left'}  
                                   w-[90%] mt-4 bg-blue-100 p-2 rounded-lg `
                            }
                            // style={{textAlign: message.type === 'user' ? 'right' : 'left'}}
                        >
                            {/*@ts-ignore*/}
                            {message.type === 'user' ?
                                <p
                                    className={'rounded-lg'}
                                >
                                    {message.text}
                                </p> :
                                // flex flex-row justify-center -> 内容居中
                                <div className={'prose'}
                                     dangerouslySetInnerHTML={{__html: marked(message.text)}}></div>
                            }
                        </div>
                    </div>
                ))}
            </div>
            <div
                className={'w-full flex flex-row justify-center mt-4'}
            >
                <input
                    className={'w-[90%] p-2 border-black border rounded-lg'}
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyPress={(e) => {
                        if (e.key === 'Enter') sendMessage();
                    }}
                />
                <button
                    className={'ml-2 p-2 rounded-lg bg-green-300'}
                    onClick={sendMessage}>Send
                </button>
            </div>
        </div>
    );
};

export default Interview;

